<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改试题')" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-question-edit" th:object="${examQuestion}">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">设置试题</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">设置答案</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <input name="id" th:field="*{id}" type="hidden">
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">试题名称：</label>
                                <div class="col-sm-8">
                                    <input name="name" th:field="*{name}" class="form-control" type="text" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">试题类型：</label>
                                <div class="col-sm-8">
                                    <select name="type" class="form-control m-b" th:with="type=${@dict.getType('sc_exam_question_type')}" required>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{type}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">学科：</label>
                                <div class="col-sm-8">
                                    <select name="subject" class="form-control m-b" th:with="type=${@dict.getType('sc_subject_type')}" required th:field="*{subject}">
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">年级：</label>
                                <div class="col-sm-8">
                                    <input id="gradeName" name="gradeName"  type="hidden">
                                    <select class='form-control selectpicker' data-live-search="true" id='gradeId' name='gradeId' data-th-grade-id="*{gradeId}" required>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">内容：</label>
                                <div class="col-sm-8">
                                    <input id="questionContentInput" name="content" type="hidden">
                                    <div class="ibox-content no-padding">
                                        <div class="summernote" id="questionContent" th:utext="*{content}" required>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">难度：</label>
                                <div class="col-sm-8">
                                    <select name="difficulty" class="form-control m-b" th:with="type=${@dict.getType('sc_exam_difficulty')}" required th:field="*{difficulty}">
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">分数：</label>
                                <div class="col-sm-8">
                                    <input name="score" th:field="*{score}" class="form-control" type="text" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">学期：</label>
                                <div class="col-sm-8">
                                    <select name="term" class="form-control m-b" th:with="type=${@dict.getType('sc_term_type')}" required th:field="*{term}">
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <div class="form-group">
                                <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">添加答案</button>
                                <div id="add_select">
                                    <table id="answer_table" class="table table-bordered">

                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加答案
                    </h4>
                </div>
                <div class="modal-body form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">序号</label>
                        <div class="col-sm-4">
                            <input type="number" id="sortNo" placeholder="请输入序号" class="form-control">
                        </div>
                        <label class="col-sm-2 control-label">分数</label>
                        <div class="col-sm-4">
                            <input type="number" id="score" placeholder="请输入分数" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">结果</label>
                        <div class="col-sm-4">
                            <select name="result" id="result" class="form-control m-b" th:with="type=${@dict.getType('sc_answer_result')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>

                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-4">
                            <select name="type" id="answerStatus" class="form-control m-b" th:with="type=${@dict.getType('sys_data_status')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="ibox-content no-padding">
                                <div class="summernote" id="answerContent">

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveAnswer()">保存</button>
                </div>
            </div>

        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/js/common/add_grade.js}"></script>
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script th:inline="javascript">
        var typeDatas = [[${@dict.getType('sc_answer_result')}]];
        var statusDatas = [[${@dict.getType('sys_data_status')}]];
        var answerList = [[${examQuestion.answerList}]];
        var prefix = ctx + "school/question";
        $("#form-question-edit").validate({
            focusCleanup: true
        });
         $(document).ready(function () {
            $('.summernote').summernote({
                lang: 'zh-CN',
                height: 100,
                followingToolbar: false,
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files[0], this);
                    }
                }
            });
        });
        // 上传文件
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }
        function submitHandler() {
           /* if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-question-edit').serialize());
            }*/



            var answerListArray = $("#answer_table").bootstrapTable('getData');
            $("#questionContentInput").val($('#questionContent').summernote('code'),);

            if ($.validate.form()) {
                var answerListArray = $("#answer_table").bootstrapTable('getData');
                var data = $('#form-question-edit').serializeJSON();
                //var answerList = JSON.stringify( answerListArray );
                if(answerListArray != null){
                    for (let i = 0; i < answerListArray.length; i++) {
                        data["answerList["+i+"].sortNo"]=answerListArray[i].sortNo;
                        data["answerList["+i+"].content"]=answerListArray[i].content;
                        data["answerList["+i+"].result"]=answerListArray[i].result;
                        data["answerList["+i+"].score"]=answerListArray[i].score;
                        data["answerList["+i+"].status"]=answerListArray[i].status;
                    }
                }
                $.operate.save(prefix + "/edit", data);
            }
        }
        $(function() {
            $("#answer_table").bootstrapTable({
                data:answerList,
                uniqueId: "sortNo",
                columns: [{
                    field: 'sortNo',
                    title: '序号'
                }, {
                    field: 'content',
                    title: '选项内容'
                }, {
                    field: 'result',
                    title: '结果',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(typeDatas, value);
                    }
                }, {
                    field: 'score',
                    title: '分数'

                }, {
                    field: 'status',
                    title: '状态',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(statusDatas, value);
                    }
                }, {
                    field: 'opt',
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<button type="button" class="btn btn-danger btn-xs" onclick="remove('+row.sortNo+')"><i class="fa fa-remove"></i>删除</button>');
                        return actions.join('');
                    }
                }]
            })
        });

        function add() {
            var table = $("#add_select").find('table');
            if(table.length == 0){
                innitTable();
            }else {
                insertRow(table)
            }

        }

        function remove(id) {

            $("#answer_table").bootstrapTable('removeByUniqueId',id);
        }

        /* 新增表格行 */
        function insertRow(obj){
            var index = $(obj).bootstrapTable("getOptions").data.length;
            $(obj).bootstrapTable('insertRow', {
                index: index, // 你想插入到哪，0表示第一行
                row: {
                    sortNo: '',
                    content: '',
                    result: '',
                    score:  '',
                    status: '',
                    opt: '<button type="button" class="btn btn-primary btn-xs" onclick="remove('+row.sortNo+')">删除</button>'
                }
            })
        }

        function saveAnswer() {

            var index = $("#answer_table").bootstrapTable("getOptions").data.length;
            $("#answer_table").bootstrapTable('insertRow', {
                index: index, // 你想插入到哪，0表示第一行
                row: {
                    sortNo: $("#sortNo").val(),
                    content: $('#answerContent').summernote('code'),
                    result: $("#result").val(),
                    score:  $("#score").val(),
                    status: $("#answerStatus").val(),
                    opt: '<button type="button" class="btn btn-primary btn-xs" onclick="remove('+$("#sortNo").val()+'")">删除</button>'
                }
            })
            $('#myModal').modal('hide')
        }
    </script>
</body>
</html>